package com.eliza.music.ui.compoment

import android.util.Log
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.eliza.library.ui.inter.IBaseRoute


@Preview(showSystemUi = true, showBackground = true)
@Composable
private fun showBar() {
    var selected by remember { mutableStateOf(false) }
    Tab(
        selected = selected,
        onClick = { selected = !selected },
        text = {
            Text(
                "page.title",
                color = if (selected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary,
            )
        },
        icon = {
            Icon(
                imageVector = Icons.Default.DateRange,
                contentDescription = "page.title",
                tint = if (selected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary,
                modifier = Modifier.clip(CircleShape)
            )
        },
        selectedContentColor = MaterialTheme.colorScheme.primary,
        unselectedContentColor = Color.Transparent,
    )
}

@Composable
fun TabNavBar(
    pages: List<IBaseRoute>,
    pagerState: PagerState,
    navTo: (Int) -> Unit
) {
    TabRow(
        modifier = Modifier.navigationBarsPadding(),
        selectedTabIndex = pagerState.currentPage
    ) {
        pages.forEachIndexed { index, page ->
            Log.e("TAG", "TabNavBar:TabRow $index == ${pagerState.currentPage}")
            val selected = index == pagerState.currentPage
            Tab(
                selected = selected,
                onClick = {
                    Log.e("TAG", "TabNavBar: onClick")
                    navTo(index)
                },
                text = {
                    Text(
                        page.title,
                        color = if (selected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary,
                    )
                },
                icon = {
                    Icon(
                        imageVector = page.imageVector,
                        contentDescription = page.title,
                        tint = if (selected) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary,
                        modifier = Modifier.clip(CircleShape)
                    )
                },
                selectedContentColor = MaterialTheme.colorScheme.primary,
                unselectedContentColor = Color.Transparent,
            )
        }
    }
}



